<template>
	<view class="cmAdd-page">
		<view class="main-content">
			<view class="formContainer">
				<!-- 违规消纳 -->
				<u-form :model="form" ref='uForm' v-if="reporttype==0">
					<u-form-item label="名称:" label-width="200" prop="name" required >
						<input class="input" v-model="form.name" type="text" placeholder="请输入所属名称" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="场地有效期:" label-width="200" prop="fieldValidityTerm">
						<input class="input" v-model="form.fieldValidityTerm" type="select" placeholder="请输入场地有效期"
							input-align="right" />
					</u-form-item>
				</u-form>
				<!-- 处置 -->
				<u-form v-model="form" ref='uForm' v-if="reporttype==1">
					<!-- <u-form-item label="名称:" label-width="200" prop="name">
						<input class="input" v-model="form.name" type="text" placeholder="请输入所属名称" @click=""
							input-align="right" />
					</u-form-item -->>
					<u-form-item label="场地有效期:" label-width="200" prop="fieldValidityTerm">
						<input class="input" v-model="form.fieldValidityTerm" type="select" placeholder="请输入场地有效期"
							input-align="right" />
					</u-form-item>

					<u-form-item label="上报人姓名:" label-width="200" prop="reportUserName">
						<input class="input" v-model="form.reportUserName" type="text" placeholder="请输入上报人姓名" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="所属街道:" label-width="200" prop="street">
						<input class="input" v-model="form.street" type="text" placeholder="请选择所属街道" @focus="showstreet"
							input-align="right" />
					</u-form-item>
					<u-form-item label="是否有效:" label-width="200" prop="isValid">
						<input class="input" v-model="form.isValid" type="text" placeholder="请输入是否有效" @click=""
							input-align="right" />
					</u-form-item>
					<!-- <u-form-item label="定位:" label-width="200" prop="address">
						<input class="input" v-model="form.address" type="text" placeholder="点击获取定位" @click=""
							input-align="right" />
					</u-form-item> -->

					<u-form-item label="责任主体:" label-width="200" prop="informationNote">
						<input class="input" v-model="form.responsibleSubject" type="area" placeholder="请输入责任主体"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="类型:" label-width="200" prop="informationNote">
						<input class="input" v-model="form.type" type="area" placeholder="请输入类型" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="车辆类型:" label-width="200" prop="informationNote">
						<input class="input" v-model="form.vehicleType" type="area" placeholder="请输入车辆类型" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="附件信息:" label-width="200" prop="informationNote">
						<u-upload :action="action" :file-list="fileList" :auto-upload="true"
							@beforeUpload='beforeUpload' @on-success='upsuccess' @on-error='uperr'></u-upload>
					</u-form-item>
				</u-form>
				<!-- 渣土车违规 -->
				<u-form v-model="form" ref='uForm' v-if="reporttype==2">
					<u-form-item label="上报人姓名:" label-width="200" prop="reportUserName">
						<input class="input" v-model="form.reportUserName" type="text" placeholder="请输入上报人姓名" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="所属街道:" label-width="200" prop="street">
						<input class="input" v-model="form.street" type="text" placeholder="请选择所属街道" @focus="showstreet"
							input-align="right" />
					</u-form-item>
					<u-form-item label="立案号:" label-width="200" prop="street">
						<input class="input" v-model="form.filingNumber" type="text" placeholder="请输入立案号"
							input-align="right" />
					</u-form-item>
					<u-form-item label="案由:" label-width="200" prop="street">
						<input class="input" v-model="form.actionCause" type="text" placeholder="请输入案由"
							input-align="right" />
					</u-form-item>
					<u-form-item label="办案单位:" label-width="200" prop="street">
						<input class="input" v-model="form.handingUnit" type="text" placeholder="请输入办案单位"
							input-align="right" />
					</u-form-item>
					<u-form-item label="查扣人员:" label-width="200" prop="street">
						<input class="input" v-model="form.arrestPersonnel" type="text" placeholder="请输入查扣人员"
							input-align="right" />
					</u-form-item>
					<u-form-item label="查扣地点:" label-width="200" prop="street">
						<input class="input" v-model="form.arrestLocation" type="text" placeholder="请输入查扣地点"
							input-align="right" />
					</u-form-item>
					<u-form-item label="当事人:" label-width="200" prop="street">
						<input class="input" v-model="form.party" type="text" placeholder="请输入当事人"
							input-align="right" />
					</u-form-item>
					<u-form-item label="运输工具:" label-width="200" prop="isValid">
						<input class="input" v-model="form.transportTool" type="text" placeholder="请输入运输工具" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="车牌号:" label-width="200" prop="isValid">
						<input class="input" v-model="form.carNumber" type="text" placeholder="请输入车牌号" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="所属车队:" label-width="200" prop="isValid">
						<input class="input" v-model="form.fleet" type="text" placeholder="请输入所属车队" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="查获物品种类:" label-width="200" prop="isValid">
						<input class="input" v-model="form.seizureGoodsType" type="text" placeholder="请输入查获物品种类"
							@click="" input-align="right" />
					</u-form-item>
					<u-form-item label="渣土来源:" label-width="200" prop="isValid">
						<input class="input" v-model="form.zhatuSource" type="text" placeholder="请输入渣土来源" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="渣土去向:" label-width="200" prop="isValid">
						<input class="input" v-model="form.zhatuWhereabouts" type="text" placeholder="请输入渣土去向" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="处罚金额:" label-width="200" prop="informationNote">
						<input class="input" v-model="form.penaltyAmount" type="area" placeholder="请输入处罚金额" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="是否有效:" label-width="200" prop="isValid">
						<input class="input" v-model="form.isValid" type="text" placeholder="请输入是否有效" @click=""
							input-align="right" />
					</u-form-item>
					<u-form-item label="结案时间:" label-width="200" prop="isValid">
						<input v-if="!showclosingTime" class="input" v-model="form.closingTime" type="text"
							placeholder="请选择结案时间" @focus="showclosingTime=true" input-align="right" />
							<view class="timepicker" v-else >
								<picker class=""  mode="date" :value="date"
									:start="startDate" :end="endDate"  @change="bindDateclosingTime"  >
									<view class="uni-input">{{date}}-</view>
								</picker>
								<picker  mode="time" :value="time" start="09:01" end="21:01"
									@change="bindTimeclosingTime">
									<view class="uni-input">{{time}}:00</view>
								</picker>
							</view>
					</u-form-item>
					<u-form-item label="立案时间:" label-width="200" prop="isValid">
						<input v-if="!showfilingTime" class="input" v-model="form.filingTime" type="text"
							placeholder="请选择立案时间" @focus="showfilingTime=true" input-align="right" />
							<view class="timepicker" v-else >
								<picker class=""  mode="date" :value="date1"
									:start="startDate" :end="endDate" @change="bindDatefilingTime">
									<view class="uni-input">{{date1}}-</view>
								</picker>
								<picker  mode="time" :value="time1" start="09:01" end="21:01"
									@change="bindTimefilingTime">
									<view class="uni-input">{{time1}}:00</view>
								</picker>
							</view>
					</u-form-item>
					<u-form-item label="放车时间:" label-width="200" prop="isValid">
						<input v-if="!showarrestTime" class="input" v-model="form.arrestTime" type="text"
							placeholder="请选择放车时间" @focus="showarrestTime=true" input-align="right" />
							<view class="timepicker" v-else >
								<picker class=""  mode="date" :value="date3"
									:start="startDate" :end="endDate" @change="bindDatearrestTime">
									<view class="uni-input">{{date2}}-</view>
								</picker>
								<picker  mode="time" :value="time2" start="09:01" end="21:01"
									@change="bindTimearrestTime">
									<view class="uni-input">{{time2}}:00</view>
								</picker>
							</view>
					</u-form-item>
					<u-form-item label="查扣时间:" label-width="200" prop="isValid">
						<input v-if="!showdepartureTime" class="input" v-model="form.departureTime" type="text"
							placeholder="请选择查扣时间" @focus="showdepartureTime=true" input-align="right" />
							<view class="timepicker" v-else >
								<picker class=""  mode="date" :value="date3"
									:start="startDate" :end="endDate" @change="bindDatedepartureTime">
									<view class="uni-input">{{date3}}-</view>
								</picker>
								<picker  mode="time" :value="time3" start="09:01" end="21:01"
									@change="bindTimedepartureTime">
									<view class="uni-input">{{time3}}:00</view>
								</picker>
							</view>
					</u-form-item>	
				</u-form>
			</view>
		</view>
		<!-- 来源 -->
		<u-select v-model="ValidityTermSelectShow" :list="ValidityTermList" @confirm="ValidityTermSelectConfirm"
			:show="true"></u-select>
		<!-- 来源 -->
		<u-select v-model="streetSelectShow" :list="streetList" @confirm="streetSelectConfirm" :show="true"></u-select>

		<u-toast ref="uToast" />
		<view class="footer">
			<button class="cancel" type="default" @click="backtopage" >取消</button>
			<button class="confim" type="default" @click="doAdd">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import timePicker from '@/components/wing-time-selector/wing-time-selector.vue';
	import methodMix from './methodMix.js'
	// import skVideoUpload from '@/components/sk-video-upload/sk-video-upload.vue'

	export default {
		mixins: [methodMix],
		components: {
			timePicker,
		},
		computed: {
			endday() {
				let time = new Date()
				return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
			},
			endtime() {
				let time = new Date()
				return time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				form: {
					// address: '山东省日照市东港区学苑路217号日照文化创意产业园',
					address: '',
					name: '',
					street: '',
					enclosurePath: '',
					reportUserName: '',
					fieldValidityTerm: '',
					informationNote: '',
					isValid: 0,
					reportUserId: '',
					lat: '',
					lng: '',
					responsibleSubject: '',
					type: '',
					vehicleType: '',

					actionCause: '',
					arrestLocation: '',
					arrestPersonnel: '',
					arrestTime: '',
					carNumber: '',
					closingTime: '',
					departureTime: '',
					filingNumber: '',
					filingTime: '',
					fleet: '',
					handingUnit: '',
					party: '',
					penaltyAmount: '',
					seizureGoodsType: '',
					transportTool: '',
					zhatuSource: '',
					zhatuWhereabouts: '',
					reportType: ''
				},
				ValidityTermSelectShow: false, //问题类型选择器显隐
				streetSelectShow: false, //大类选择器显隐
				showPicker: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				time: '12:01',
				time1: '12:01',
				time2: '12:01',
				time3: '12:01',
				date: currentDate,
				date1: currentDate,
				date2: currentDate,
				date3: currentDate,
				showclosingTime: false,
				showfilingTime:false,
				showarrestTime:false,
				showdepartureTime:false,
				value: '',
				ValidityTermList: [{
						value: 1,
						label: '是'
					},
					{
						value: 2,
						label: '否'
					}
				],
				streetList: [{
						value: 1,
						label: '武康街道'
					},
					{
						value: 2,
						label: '莫干山镇'
					},
					{
						value: 3,
						label: '阜溪街道'
					},
					{
						value: 4,
						label: '洛舍镇'
					},
					{
						value: 5,
						label: '钟管镇'
					},
					{
						value: 6,
						label: '新市镇'
					},
					{
						value: 7,
						label: '禹越镇'
					},
					{
						value: 8,
						label: '新安镇'
					},
					{
						value: 9,
						label: '雷甸镇'
					},
					{
						value: 10,
						label: '乾元镇'
					},
					{
						value: 11,
						label: '舞阳街道'
					},
					{
						value: 12,
						label: '康乾街道'
					}
				],
				fileChooseTabList: [{
					name: '拍照',
					pic: '/static/reportadd/addph.png'
				}],
				photoList: [], //图片列表
				typeMainList: [],
				typeSubList: [],
				voiceSuccessForm: {}, //语音上传成功返回地址
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: ['change','blur'],
					}],
					// address:[{
					// 	required: true,
					// 	message: '请输入位置',
					// 	trigger: 'change,blur',
					// }],
				},
				tipsContent: '',
				isPlaying: false,
				timeparams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				showtime: false,
				sourceSelectShow: false,
				nowdate: new Date().getFullYear(),
				sbtime: '请选择时间',
				templetes: '模板',
				videoList: [],
				action: 'http://172.21.188.5:8085/zhatu/file/upload',
				fileList: [

				],
				reporttype: 0
			}
		},
		onLoad(op) {
			this.getLocation()
			this.reporttype = op.type
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			bindTimeclosingTime(e,i) {
				console.log(e,i)
				this.time = e.target.value
				this.closingTime = this.date + ' '+ this.time+':00'
			},
			bindDateclosingTime(e,i) {
				console.log(e,i)
				this.date = e.target.value
				this.closingTime = this.date + ' '+ this.time+':00'
				console.log(this.closingTime)
			},
			
			//立案时间
			bindTimefilingTime(e,i) {
				this.time1 = e.target.value
				this.filingTime = this.date1 + ' '+ this.time1+':00'
			},
			bindDatefilingTime(e,i) {
				this.date1 = e.target.value
				this.filingTime = this.date1 + ' '+ this.time1+':00'
			},
			//放车时间
			bindTimedepartureTime(e,i) {
				this.time2 = e.target.value
				this.departureTime = this.date2 + ' '+ this.time2+':00'
			},
			bindDatedepartureTime(e,i) {
				this.date2 = e.target.value
				this.departureTime = this.date2 + ' '+ this.time2+':00'
			},
			//查扣时间
			bindTimearrestTime(e,i) {
				this.time3 = e.target.value
				this.arrestTime = this.date3 + ' '+ this.time3+':00'
			},
			bindDatearrestTime(e,i) {
				this.date3 = e.target.value
				this.arrestTime = this.date3 + ' '+ this.time3+':00'
			},
		
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//返回
			backtopage(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cmAdd-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #F2F3F5;

		.main-content {
			flex: 1;
			overflow: auto;


			.formContainer {
				margin-top: 18rpx;
				padding: 18rpx 27rpx 0 41rpx;
				background-color: #FFFFFF;
			}
		}

	}

	.input {
		margin-top: 15rpx;
	}

	.u-form-item {
		border-bottom: 1rpx solid grey;
	}

	.footer {
		display: flex;
		width: 100%;
		height: 174rpx;
		background-color: #FFFFFF;
		font-size: 29rpx;
		border-top: 1rpx soild #000000;

		.cancel {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			color: #2E5AFB;
			margin-top: 14rpx;
			margin-left: 29rpx;
		}

		.confim {
			height: 87rpx;
			width: 339rpx;
			border: 1rpx solid #2E5AFB;
			border-radius: 50rpx;
			background-color: #2E5AFB;
			color: #FFFFFF;
			margin-top: 14rpx;
			margin-left: 14rpx;
		}
	}

	.timepicker {
		
		display: flex;
	}
</style>
